<template>
  <BasicModal title="挂账数据" @register="registerModal" :afterClose="onClose" destroyOnClose
              :showCancelBtn="false" :showOkBtn="false" :canFullscreen="false" :centered="true"
              :width="'90%'"
              :bodyStyle="{height:'calc(100vh - 130px)', overflowY:'no'}"
  >
    <!-- 挂账查看 -->
    <div class="jeecg-basic-table jeecg-basic-table-form-container" style="margin-top: -10px">
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="8" type="flex">
          <a-col flex="135px">
            <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
              <JDictSelectTag
                v-model:value="queryParam.ddlxIds"
                mode="multiple"
                dictCode="ddlxType@ddlxUser"
                placeholder="全部"
                :maxTagCount="0"
                :getPopupContainer="(node) => node.parentNode"
                :dropdownStyle="{ width: '120px', overflow: 'auto' }"
                :dropdownMatchSelectWidth="false"
              />
            </a-form-item>
          </a-col>

          <a-col flex="340px">
            <a-form-item label="提交日期" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '260px' } }">
              <a-date-picker
                v-model:value="queryParam.lrsjBegin"
                :disabled-date="disabledStartDate"
                valueFormat="YYYY-MM-DD"
                placeholder=""
                style="width: 120px"
              />
              ~
              <a-date-picker
                v-model:value="queryParam.lrsjEnd"
                :disabled-date="disabledEndDate"
                valueFormat="YYYY-MM-DD"
                placeholder=""
                style="width: 120px"
              />
            </a-form-item>
          </a-col>

          <a-col flex="120px">
            <a-form-item label="状态" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 17 }">
              <a-select v-model:value="queryParam.stat" class="w80" placeholder="全部" :showArrow="false" :allowClear="false">
                <a-select-option value="1">未审</a-select-option>
                <a-select-option value="2">经理</a-select-option>
                <a-select-option value="9">回退</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col flex="202px">
            <a-form-item label="订单号" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ span: 17 }">
              <a-input placeholder="" v-model:value="queryParam.orderId"></a-input>
            </a-form-item>
          </a-col>

          <a-col flex="auto" style="float:right; width:180px;">
            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
              <a-button type="default" @click="searchReset" preIcon="ant-design:reload-outlined" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <BasicTable @register="registerTable" :onRowDbClick="handleDblclick">
      <template #operation="{text, record}">
        <a-badge :color="statusColor(text, record)" :text="operateTim(text, record)" />
      </template>
    </BasicTable>
    <!-- table区域-end -->

    <!-- 表单区域-->
    <AccountFlowIntervalBack @register="registerAccountFlowInterval" @success="reload"></AccountFlowIntervalBack>
  </BasicModal>
</template>

<script lang="ts" setup name="accountFlow-takeTakeDataGrid">
import { ref, computed, unref, reactive, toRaw } from "vue";
import { BasicTable, TableAction, ActionItem, BasicColumn } from "/@/components/Table";
import { BasicModal, useModal, useModalInner } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { render } from "/@/utils/common/renderUtils";
import { takeManageChecked } from "/@/views/full/account/types/accountflow.api";
import { momentSearchQueryDate } from "/@/utils/dateUtil";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import AccountFlowIntervalBack from './modules/AccountFlowIntervalBack.vue';


//表单赋值

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive({
  ddlxIds: '',
  stat: '1', //未审
  lrsjBegin: momentSearchQueryDate('sub'),
  lrsjEnd: momentSearchQueryDate('add'),
});

const [registerModal, { closeModal }] = useModalInner(async (data) => {
  if (data.stat) {
    queryParam.stat = data.stat
  }
  searchQuery();
});

//限制查询日期，开始日期不能大于结束日期
function disabledStartDate(beginDate) {
  const endDate = queryParam.lrsjEnd;
  if (!beginDate || !endDate) {
    return false;
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.lrsjBegin;
  if (!endDate || !beginDate) {
    return false;
  }
  return moment(beginDate).valueOf() > endDate.valueOf();
}

//转账支付，审核状态为经理时，默认查询日期是； 其它状态
let begDateDisabled = ref(true);
let endDateDisabled = ref(true);
function statSelect(data) {
  if (data == '2' || data == '') {
    //queryParam.spsjBegin  = "";
    //queryParam.spsjEnd    = "";
    begDateDisabled.value = true;
    endDateDisabled.value = true;
  } else {
    var today = moment().format('YYYY-MM-DD');
    //queryParam.spsjBegin = today;
    //queryParam.spsjEnd   = today;
    begDateDisabled.value = false;
    endDateDisabled.value = false;
  }
}

//订单列表
const statusFmt = ({text}: { text: any }) => {
  if (!text) {
    return
  }
  const color = text == '1' ? 'green' : text == '2' ? 'red' : 'default';
  return render.renderTag(render.renderDict(text, 'accountStat'), color)
}

//操作人 1审核，经理，9回退
const statusColor = (text, record) => {
  let color = '';
  if (record.stat == '1') {
    color = 'green'
  } else if(record.stat == '2') {
    color = 'magenta'
    text = record.shsj
  } else if(record.stat == '9') {
    color = '#999'
    text = record.spsj || record.shsj
  }

  if (!text) {
    color = "";
  }
  return color
}

//操作时间
const operateTim = (text, record) => {
  if (record.stat == "2") {
    text = record.shsj
  } else if (record.stat == "9") {
    text = record.spsj || record.shsj
  }
  if (!text) {
    return "";
  } else {
    return moment(text).format("YYYY-MM-DD HH:mm");
  }
}

const operator = ({ text, record }) => {
  if (record.stat == "2") {
    text = record.shrName
  } else if (record.stat == "9") {
    text = record.sprName || record.shrName
  }
  if (!text) {
    return "";
  } else {
    return text;
  }
};

//订单列表 - 表头
const columns: BasicColumn[] = [
  {title:"状态", align:"center", dataIndex:"stat", width: 40, customRender: statusFmt,},
  {title:"订单号", align:"center", dataIndex:"orderId", width: 80, className: "text-red-500"},
  {title:"部门", align:"center", dataIndex:"ddlx", width: 60, customRender:({text}) => render.renderDict(text, 'ddlxType') },
  {title:"单位名称", align:"left", dataIndex:"pathName", width: 200},
  {title:"支出金额", align:"right", dataIndex:"fkje", width: 80, className: "text-green-500"},
  {title:"备注", align:"left", dataIndex:"bz", width: 180},
  {title:"操作人", align:"center", dataIndex:"realname", width: 60, customRender: operator},
  {title:"操作日期", align:"center", dataIndex:"lrsj", width: 110, slots: { customRender: 'operation' } },
]

//初始化 -------------------------------------------------------------
function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function searchReset() {
  Object.assign(queryParam, {ddlxIds: '', ddzt: '', ywlx: ''});
  reload();
}

function handleSummary(tableData: Recordable[]) {
  const res = getRawDataSource()
  if (res) {
    return getRawDataSource().summary;
  } else {
    return [];
  }
}

// 列表页面公共参数、方法
const {prefixCls, tableContext} = useListPage({
  designScope: 'accountFlow-takeDataGrid',
  tableProps: {
    api: takeManageChecked,
    columns: columns,
    showTableSetting: false,
    showIndexColumn: true,    //行号
    clickToRowSelect: true,   //点击选择
    showActionColumn: false,
    useSearchForm: false,
    showSummary: true,
    resizeHeightOffset: 55,
    summaryFunc: handleSummary,
    beforeFetch: (params) => Object.assign(params, unref(queryParam)),
  },
})

//注册table数据
const [registerTable, {reload, setProps, getRawDataSource, redoHeight}] = tableContext

//详细订单
const [registerAccountFlowInterval, {openModal: openAccountFlowInterval}] = useModal();

//双击行
function handleDblclick(record) {
  //openBusinessOrder(true, record.id);
  var params = Object.assign({}, queryParam)
  params['id'] = record.id
  params['type'] = 'takeManageChecked'
  openAccountFlowInterval(true, params);
}

function onClose() {
  
}
</script>
<style scoped>

</style>
